<template>
	<view class="content">
		<self-navbar title="即时咨询历史"></self-navbar>
		<view style="flex-grow: 1;">
			<global-notify></global-notify>
			<z-paging ref="paging" :fixed='false' show-refresher-update-time v-model="dataList" @query="queryList">
				<u-sticky bgColor="#fff" style="top: 0">
					<view style="background-color: #fff;padding: 8px;border-bottom: 1px solid #F3F5F9;">
						<u-search :clearabled="true" @clickIcon='search' @custom="search" @clear="search" @search='search'
							placeholder="请输入咨询内容关键词" v-model="searchKey"></u-search>
					</view>
				</u-sticky>

				<!-- 自定义返回顶部view -->
				<template #backToTop>
					<self-back-to-top ref="backToTop" :current="currentNo" :total="total" />
				</template>

				<view @click="viewDetail(item)" class="listItem flex" v-for="(item,index) in dataList" :key="index">
					<view style="flex-grow: 1;">
						<view class="listItemName">
							<view class="flex">
								{{item.consultationTypeLabel}}
								<view class="mL6">
									<u-tag :text="distributionTypes[item.distributionType] || '--'" size="mini"></u-tag>
								</view>
							</view>
						</view>
						<view class="listItemInfo">
							<view class="listItemInfoLabel">发起时间：</view>
							<view class="listItemInfoValue">{{item.whenCreated}}</view>
						</view>
						<!-- <view class="listItemInfo">
						<view class="listItemInfoLabel">接入时间：</view>
						<view class="listItemInfoValue">{{item.acceptTime}}</view>
					</view>
					<view class="listItemInfo">
						<view class="listItemInfoLabel">结束时间：</view>
						<view class="listItemInfoValue">{{item.closeTime}}</view>
					</view> -->
						<view class="listItemInfo">
							<view class="listItemInfoLabel">咨询内容：</view>
							<view class="listItemInfoValue">
								{{item.question}}
							</view>
						</view>
					</view>
					<view class="listItemExt">
						<u-avatar :size='36' :src="item.userInfo? (item.userInfo.avatar || defaltAva):defaltAva"></u-avatar>
						<view class="listItemExtLabel">{{item.lawyerName}}</view>
					</view>
				</view>
			</z-paging>

			<u-back-top icon="arrow-up" :iconStyle="iconStyle" :scroll-top="scrollTop"></u-back-top>
			<u-action-sheet :round='10' :show="showDetailModal" title="咨询详情" @close="()=>{showDetailModal=false;}">
				<slot>
					<view v-if="showDetailModal" style="width: 100%;text-align: left; max-height: 60vh; overflow-y: auto;">
						<imDetail :consultant='current'></imDetail>
					</view>
				</slot>
			</u-action-sheet>
		</view>

	</view>
</template>

<script>
	import {
		toast,
		clearStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js'
	import imDetail from './imDetail.vue';
	export default {
		components: {
			imDetail
		},
		data() {
			return {
				showDetailModal: false,
				defaltAva: require('@/static/images/avatar.png'),
				searchKey: '',
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					backgroudColor: '#2979ff',
					color: '#fff'
				},
				dataList: [],
				icTypes: [],
				systemRoles: [],
				currentNo: 0,
				total: 0,
				distributionTypes: {
					system: '系统派单',
					appoint: "管理员指派",
					proac: "律师抢单"
				},
				current: {}
			};
		},
		methods: {
			search: function() {
				this.$refs.paging.reload(true);
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					status: 'finish',
					icType: 'IM',
					searchKey: this.searchKey
				}
				this.$api.consultationList(params).then(res => {
					if (res.success) {
						let result = res.result || {}
						this.currentNo = pageNo
						this.total = result.maxPage || 0
						// 将请求的结果数组传递给z-paging
						this.$refs.paging.complete(result.data || []);
					} else {
						// 将请求的结果数组传递给z-paging
						toast(res.message)
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},

			viewDetail(item) {
				this.current = item
				this.showDetailModal = true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
</style>